<template>
	<view class="cl-main-box">
		<view class="cl-back-box" @click="returnBack()">
			<text class="back-text">密码登录</text>
			<icon class="back-icon" type="cancel"></icon>
		</view>
		<view class="cl-form-box">
			<view class="form-input">
				<text class="from-text">手机号：</text>
				<input v-model="loginData.phone" class="input" focus placeholder="请输入账号" />
			</view>
			<view class="form-input">
				<text class="from-text">验证码：</text>
				<input style="width: 200rpx;" v-model="loginData.code" class="input" focus placeholder="请输入验证码" />
				<button size="mini" style="width:100rpx;padding:0;" @click="getCode()"><text
						style="font-size: 12px;">获取</text></button>
			</view>
		</view>
		<button class="cl-login-button" @click="login()">登录</button>
	</view>
</template>

<script>
	import {
		errorMessage,
		successMessage,
		warningMessage
	} from '../../utils/message';
	import {
		getRequest,
		postRequest
	} from '../../utils/request';
	import {
		checkPassword,
		checkPhone
	} from '../../utils/utils';
	export default {
		data() {
			return {
				loginData: {
					phone: '',
					code: ''
				},
				countdown: 0, // 倒计时秒数
				disableBtn: false // 控制按钮状态
			}
		},
		methods: {
			getCode() {
				if (this.disableBtn) {
					warningMessage(this.countdown + '秒后重新获取')
					return; // 如果按钮不可用，直接返回
				}
				// 数据校验
				if (!checkPhone(this.loginData.phone)) {
					warningMessage('手机号格式错误！')
					return false;
				}
				getRequest('/user/getCode', {
					'phone': this.loginData.phone
				}).then(res => {
					if (res.code === '200') {
						successMessage("验证码获取成功!");
						this.countdown = 60; // 设置倒计时为 60 秒
						this.disableBtn = true; // 禁用按钮

						let timer = setInterval(() => {
							if (this.countdown > 0) {
								this.countdown--;
							} else {
								clearInterval(timer);
								this.disableBtn = false; // 启用按钮
							}
						}, 1000);
					} else {
						errorMessage('出错了：' + res.msg)
					}
				}).catch(err => {
					errorMessage("系统出错了！")
				})
			},
			login() {
				if (!checkPhone(this.loginData.phone)) {
					warningMessage("请输入有效的手机号！")
					return false;
				}
				postRequest('/user/login/code', this.loginData).then(res => {
					// 在后端进行验证码正误判断
					if (res.code === '200') {
						uni.setStorageSync("token",res.data.token)
						uni.reLaunch({
							url: '/pages/content/home/home'
						})
					} else {
						errorMessage(res.msg)
					}
				}).catch(err => {
					errorMessage('系统出错了！')
					console.log(err)
				})
			},
			// 返回
			returnBack() {
				this.$emit("closeDialog");
			}
		}
	}
</script>

<style lang="scss">
	.cl-main-box {
		width: 100%;
		height: 100%;
		/* 使用 rgba() 设置背景颜色透明度 */
		background-color: rgba(162, 241, 251, 0.7);
		/* 添加边框 */
		border: 1px solid #fafafa;
		border-radius: 10px;

		.cl-back-box {
			width: 100%;
			height: 10%;

			.back-text {
				position: relative;
				font-size: 20px;
				font-weight: bold;
				font-family: 宋体;
				left: 250rpx;
				top: 60rpx;
			}

			.back-icon {
				float: right;
				margin-top: 10px;
				margin-right: 10px;
			}
		}

		.cl-form-box {
			position: relative;
			width: 80%;
			height: 50%;
			left: 50%;
			transform: translate(-50%);
			top: 40px;
			background-color: white;
			border-radius: 10px;

			.form-input {
				display: flex;
				position: relative;
				width: 90%;
				height: 30px;
				margin: 20rpx;
				padding: 5rpx;
				top: 90rpx;
				left: 45%;
				transform: translate(-50%);
			
				.from-text {
					display: inline-block;
					position: relative;
					width: 130rpx;
					font-size: 12px;
					/* 使用justify来实现所有字中间等间距显示 */
					text-align: justify;
					align-items: center;
			
					::after {
						content: "";
						display: inline-block;
						width: 100%;
					}
			
				}
			
				.input {
					width: 300rpx;
					background-color: #87CEFA;
					padding: 4rpx;
					padding-left: 20rpx;
					border-radius: 10rpx;
					;
				}
			
			}
		}

		.cl-login-button {
			background-color: #3dbff6;
			width: 40%;
			position: relative;
			top: 120rpx;
		}
	}
</style>